<template>
  <div :class="{ left: !collapse }" class="listBox">
    <el-menu
      :default-active="defaultActive"
      class="el-menu-vertical-demo"
      :collapse="collapse"
      unique-opened
      router
      :collapse-transition="false"
      @select="handleOpen"
    >
      <div class="topText" :style="{background:$store.state.config.theme}">
        <transition name="title" appear>
          <span @click="pushIndex" v-show="!collapse">物业管理系统</span>
        </transition>
      </div>
      <template v-for="(item, index) of list">
        <el-submenu :index="item.path" :key="index" v-if="item.list.length">
          <template slot="title">
            <i class="iconfont" :class="item.icon"></i>
            <span>{{ item.text }}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item
              :index="val.path"
              v-for="(val, i) of item.list"
              :key="i"
            >
              <i class="iconfont" :class="val.icon"></i>
              <span style="margin-left:4px;">{{ val.text }}</span>
            </el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <template v-else>
          <el-menu-item :index="item.path" :key="index">
            <i class="iconfont " :class="item.icon"></i>
            <span style="margin-left:4px;">{{ item.text }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
<script>
import {mapState} from 'vuex';
export default {
  name: "left",
  props: {
    list: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      collapse: false,
      width: "260px",
    };
  },
  computed:{
    ...mapState('config',['defaultActive','gettheme'])
  },
  mounted() {
    // 订阅事件,修改侧边导航的收起和展开状态
    this.$bus.$on("changeLeftStatus", (res) => {
      this.collapse = res;
      if (this.collapse) {
        this.width = "260px";
      } else {
        this.width = "";
      }
    });
  },
  beforeDestroy() {
    // 组件销毁前卸载全局自定义事件,防止事件污染
    this.$bus.$off("changeLeftStatus");
  },
  methods: {
    handleOpen(key, keyPath) {
    },
    pushIndex(){
      if(this.$store.state.config.defaultActive=='/vel/index')return
      this.$router.push('/vel/index')
    }
  },
};
</script>
<style >
  .el-menu-vertical-demo{
    height: 100%; width:100%;
    overflow: hidden;
  }
</style>
<style scoped lang='scss'>
@import '@/styles/share.scss';
.left {
  width: 240px;
  z-index: 99;

}
.topText {
  height: 64px;
  width: 100%;
  // background: $--color-primary;
  display: flex;
  align-items: center;
  justify-content: center;
  
  span {
    color: #fff;
    font-size: 16px;
    cursor: pointer;
  }
}
.listBox {
  height: 100%;
  overflow: hidden;
    // box-shadow: 0 8px 4px 0 rgba(0,0,0,0.2);
  border-right: 1px solid #fff;
}
.title-enter-active {
  animation: atguigu 0.5s linear;
}

.title-leave-active {
  animation: atguigu 0.5s linear reverse;
}

@keyframes atguigu {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
</style>